/* eslint-disable vue/valid-v-for */
<template>
  <div class="bigWrapper clearFix">
    <!-- 头部公共组件 -->
    <Header></Header>
    <div class="wrapper">
      <div class="navAddRess">
        <!-- 头部导航 -->
        <span>深圳美团</span>>
        <span>深圳美食</span>
      </div>

      <!-- 三级菜单 -->
      <div class="topWrapper">
        <!-- 已选条件 -->
        <div class="conditionBox" v-if="foodName || regionName">
          <div>已选条件</div>
          <ul>
            <li v-show="foodName">
              {{ foodName }}
              <span @click="delFoodName">×</span>
            </li>
            <li v-show="regionName">
              {{ regionName }}
              <span @click="delRegionName">×</span>
            </li>
          </ul>
          <button @click="delAll">清除全部</button>
        </div>
        <div class="threeClassification">
          <div class="FLBox">
            <div class="cation">分类</div>
            <div class="allOn">全部</div>
            <ul class="FlUl" @click="handleFood">
              <li :data-id="item.id" v-for="item in filtersData" :key="item.id">
                <span
                  :data-id="item.id"
                  :data-name="item.name"
                  :class="item.id == itemId ? 'active' : ''"
                >
                  {{ item.name }}
                </span>
              </li>
            </ul>
          </div>
          <div class="FLBox">
            <div class="cation">区域</div>
            <div class="allOn">全部</div>

            <ul class="FlUl hide">
              <li v-for="c1 in areasData" :key="c1.id">
                <span
                  v-if="regionId === c1.id"
                  :class="regionId === c1.id ? 'active' : ''"
                >
                  {{ regionName }}
                  <span style="font-size: 12px" class="iconfont">&#xe688;</span>
                </span>
                <span v-else
                  >{{ c1.name }}
                  <span style="font-size: 12px" class="iconfont">&#xe688;</span>
                </span>

                <div class="absoluteList">
                  <div>{{ c1.name }}</div>
                  <ul @click="handleRegion($event, c1.name, c1.id)">
                    <li
                      :data-name="c2.name"
                      :data-index="index"
                      v-for="(c2, index) in c1.subAreas"
                      :key="c2.id"
                    >
                      {{ c2.name }}
                    </li>
                  </ul>
                  <!-- 开浮动定位 -->
                </div>
              </li>
            </ul>
            <!-- 隐藏列表 -->
          </div>
          <div class="FLBox">
            <div class="cation">用餐人数</div>
            <div class="allOn">全部</div>
            <ul class="FlUl FLULEation" @click="eatFood">
              <li>
                <span :data-index="1" :class="dateIndex === '1' ? 'active' : ''"
                  >单人餐</span
                >
              </li>
              <li>
                <span :class="dateIndex === '2' ? 'active' : ''" :data-index="2"
                  >双人餐</span
                >
              </li>
              <li>
                <span :class="dateIndex === '3' ? 'active' : ''" :data-index="3"
                  >3-4人</span
                >
              </li>
              <li>
                <span :class="dateIndex === '4' ? 'active' : ''" :data-index="4"
                  >5-6人</span
                >
              </li>
              <li>
                <span :class="dateIndex === '5' ? 'active' : ''" :data-index="5"
                  >7-8人</span
                >
              </li>
              <li>
                <span :class="dateIndex === '6' ? 'active' : ''" :data-index="6"
                  >9-10人</span
                >
              </li>
              <li>
                <span :class="dateIndex === '7' ? 'active' : ''" :data-index="7"
                  >10人以上</span
                >
              </li>
              <li>
                <span :class="dateIndex === '8' ? 'active' : ''" :data-index="8"
                  >其他</span
                >
              </li>
            </ul>
          </div>
        </div>
        <!-- 商品列表 -->
        <div class="menuListBox clearFix">
          <div class="menuList">
            <div class="topText">
              <span :class="s === 1 ? 'textActive' : ''" @click="defaultSort"
                >默认</span
              >
              <span :class="s === 0 ? 'textActive' : ''" @click="priceSortDown"
                >价格
                <i v-if="s === 0">
                  <i
                    v-show="sortShow == 1"
                    class="iconfont icon-arrow-down"
                    :class="sortShow === 1 ? 'textActive' : ''"
                    style="font-size: 12px"
                  ></i>
                  <i
                    v-show="sortShow == 2"
                    :class="sortShow === 2 ? 'textActive' : ''"
                    class="iconfont icon-arrow-up-bold"
                    style="font-size: 12px"
                  ></i>
                </i>
              </span>
              <span :class="s === 2 ? 'textActive' : ''" @click="goodCommentNum"
                >评分最高</span
              >
            </div>
            <ul class="menuInfoLIst">
              <li
                class="menuInfoBox"
                v-for="(c1, indexOut) in poiInfosData"
                :key="c1.poiId"
              >
                <img
                  v-lazy="c1.frontImg"
                  alt="图片"
                  @click="goDetail(c1.poiId)"
                />
                <span class="indexSort">{{ indexOut + 1 }}</span>
                <div class="goodContent">
                  <h4 @click="goDetail(c1.poiId)">{{ c1.title }}</h4>
                  <div>
                    <div class="star-cont">
                      <ul class="stars-ul">
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                      </ul>
                      <ul
                        class="stars-ul stars-light"
                        :style="`width:${(c1.avgScore / 5) * 81}px`"
                      >
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                        <li><i class="iconfont icon-start"></i></li>
                      </ul>
                    </div>
                    <span>{{ c1.avgScore }}评分</span>
                    <span>{{ c1.allCommentNum }}条评论</span>
                  </div>
                  <div class="address">{{ c1.address }}</div>
                  <div>人均{{ c1.avgPrice }}</div>
                  <div
                    class="showHid"
                    v-for="(c2, index) in c1.dealList"
                    :key="index"
                  >
                    <div v-if="!c1.flag ? index < 2 : true" class="menuTitle">
                      {{ c2.title }}
                    </div>
                    <div v-show="!c1.flag ? index < 2 : true" class="menuPice">
                      ￥<span class="pice">{{ c2.price }}</span>
                    </div>
                  </div>
                  <div v-show="c1.dealList.length > 2">
                    <div
                      v-if="!c1.flag"
                      class="more"
                      @click="handleMore(indexOut)"
                    >
                      展开
                      <span class="iconfont">&#xe665;</span>
                    </div>
                    <div v-else class="more" @click="handleMore(indexOut)">
                      收起
                      <span class="iconfont">&#xe685;</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="pagination">
          <Pagination v-model:current="current" :total="total" />
        </div>
      </div>

      <!-- 猜你喜欢 -->
      <div class="rightLike">
        <meta name="referrer" content="no-referrer" />
        <h3 class="lickText">猜你喜欢</h3>
        <div>
          <div
            class="goodInfo"
            v-for="item in rightLikeData"
            :key="item.itemId"
          >
            <img v-lazy="item.imgUrl" alt="图片" />
            <div class="shopName">{{ item.title }}</div>
            <div class="address">{{ item.areaName }}</div>
            <div class="allPice">
              ￥<span class="pice">{{ item.lowPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import router from "../../router";

import { onMounted, ref, watch } from "vue";
import { Pagination } from "ant-design-vue";
import {
  youLikeApi,
  cityListApi,
  filtersApi,
  foodListApi,
} from "@/api/foodInfoList";

const filtersData = ref([]);
const areasData = ref([]);
const poiInfosData = ref([]);
const rightLikeData = ref([]);
const total = ref(30);

onMounted(async () => {
  // 猜你喜欢列表
  rightLikeData.value = await youLikeApi();
});
onMounted(async () => {
  // 城市列表
  areasData.value = await cityListApi();
});
onMounted(async () => {
  // 商品详情
  poiInfosData.value = await filtersApi(current.value);
});
onMounted(async () => {
  // 菜单
  filtersData.value = await foodListApi();
});

const navIndex = ref(-1);
const isShow = ref(false);

// 展开收起
const handleMore = (index) => {
  if (poiInfosData.value[index].flag) {
    poiInfosData.value[index].flag = null;
    return;
  } else {
    poiInfosData.value[index].flag = true;
  }
  navIndex.value = index;
  isShow.value = true;
};

// 分页器
// 当前页数
const current = ref(1);
// 监视页码的变化，重新发送请求渲染页面
watch(current, async () => {
  poiInfosData.value = await filtersApi(current.value);
});
// 已选条件
const regionName = ref("");
const foodName = ref("");
const itemId = ref(null);
const handleFood = (e) => {
  if (e.target.dataset.name) {
    foodName.value = e.target.dataset.name;
  }
  itemId.value = e.target.dataset.id;
};
// 清除foodName
const delFoodName = () => {
  foodName.value = "";
};
// 获得区域
const regionId = ref();
const handleRegion = (e, name, id) => {
  if (e.target.dataset.name) {
    if (e.target.dataset.index === "0") {
      regionName.value = name;
    } else {
      regionName.value = e.target.dataset.name;
    }
  }
  regionId.value = id;
};
// 清除区域
const delRegionName = () => {
  regionName.value = "";
};
// 清除全部
const delAll = () => {
  regionName.value = "";
  foodName.value = "";
};
// 用餐人数
const dateIndex = ref(0);
const eatFood = (e) => {
  dateIndex.value = e.target.dataset.index;
};
// 控制是否显示箭头
const s = ref(1);
// 控制显示那个箭头
const sortShow = ref(0);
// 控制显示那个函数
const flag = ref(1);
// 默认排序
const defaultSort = async () => {
  s.value = 1;
  poiInfosData.value = await filtersApi(current.value);
};
// 排序函数
function resSort(b, a) {
  let res = JSON.parse(JSON.stringify(poiInfosData.value));
  res.sort((x, y) => {
    if (x.avgPrice > y.avgPrice) {
      return a;
    }
    if (x.avgPrice < y.avgPrice) {
      return b;
    }
  });
  poiInfosData.value = res;
}
// 价格排序
const priceSortDown = () => {
  if (flag.value === 2) {
    flag.value = 1;
    s.value = 0;
    sortShow.value = 2;
    resSort(-1, 1);
  } else if (flag.value === 1) {
    flag.value = 2;
    s.value = 0;
    sortShow.value = 1;
    resSort(1, -1);
  }
};

// 好评最多
const goodCommentNum = () => {
  s.value = 2;
  const res = JSON.parse(JSON.stringify(poiInfosData.value));
  res.sort((x, y) => {
    if (x.avgScore > y.avgScore) {
      return -1;
    }
    if (x.avgScore < y.avgScore) {
      return 1;
    }
  });
  poiInfosData.value = res;
};

// 页面跳转至详情
const goDetail = (id) => {
  router.push({
    path: "/details",
    query: {
      poiId: id,
    },
  });
};
</script>

<style scoped lang="less">
// ul的原样式
ul {
  list-style: none;
  padding: 0;
}

// 清除浮动
.clearFix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.navAddRess {
  text-align: start;
  height: 55;
  padding: 19px 0;
  font-size: 12px;
}
.bigWrapper {
  width: 100%;
  background-color: #f8f8f8;
}
.wrapper {
  margin: 0 auto;
  width: 1200px;
}
.bigWrapper .topWrapper {
  float: left;
  box-sizing: border-box;

  width: 950px;
}
.threeClassification {
  border: 1px solid rgba(173, 173, 173, 0.467);
  padding-left: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 0 0 5px 5px;
}
.FLBox {
  padding-top: 10px;
}
// 隐藏区域
.FlUl .absoluteList {
  width: 510px;
  display: none;
  position: absolute;
  top: 22px;
  left: -8px;
  background-color: #fff;
  border: 1px solid rgb(160, 158, 158);

  padding: 19px 15px 9px !important;
  size: 999;

  div {
    margin-bottom: 11px !important;
    color: #777;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    margin: 5px 0;
    padding: 0 !important;
    font-size: 12px;
  }
}
// 三角形
.FlUl .absoluteList:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border: 5px solid;
  border-color: transparent transparent rgb(160, 158, 158) transparent;
  position: absolute;
  top: -10px;
  left: 26px;
}
.hide li {
  position: relative;
}
.FlUl li:hover .absoluteList {
  z-index: 999;
  display: block;
}

.FLBox .FlUl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ccc;
  li {
    cursor: pointer;
    font-size: 14px !important;
  }
}

// 最后一个元素不要下边框
.FLBox:last-child .FlUl {
  border-bottom: none;
}
.FLBox .cation {
  float: left;
  display: inline-block;
  width: 65px;
}
.FLBox .allOn {
  text-align: center;
  float: left;
  display: inline-block;
  width: 65px;
  margin-left: 30px;
  margin-right: 15px;
  background-color: #13d1be;
  border-radius: 20px;
  color: #fff;
}
.FLBox .FlUl li {
  text-align: start;
  width: 125px;
  margin: 5px;
  span {
    padding: 3px;
  }
}
// 菜单列表
.menuListBox {
  background-color: #fff;
  border: 1px solid rgba(173, 173, 173, 0.467);
  border-radius: 5px;
  margin-bottom: 25px;
}
.menuList {
  padding: 15px 20px 20px;
}
// 处理商品排名
.menuInfoLIst .menuInfoBox {
  position: relative;
}
.menuInfoLIst .menuInfoBox > span {
  position: absolute;
  background-color: #fb6433;
  color: white;
  font-size: 12px;
  width: 25px;
  top: 5px;
  border-radius: 5px;
}
.menuInfoLIst .goodContent {
  text-align: start;
  padding-left: 20px;
}
.menuInfoLIst .goodContent div {
  margin-top: 10px;
}
.menuInfoLIst li {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 15px;
  div {
    cursor: pointer;
  }
}
.menuInfoLIst li:last-child {
  border-bottom: none;
}

.menuInfoLIst li img {
  width: 220px;
  height: 125px;
  border-radius: 10px;
  cursor: pointer;
}
.menuInfoLIst .goodContent div:nth-child(2) {
  font-size: 12px;
}
.menuInfoLIst .goodContent div:nth-child(2) span:nth-child(3) {
  font-size: 12px;
  color: #f60;
  margin-left: 10px;
}
.menuInfoLIst .goodContent div:nth-child(2) span:nth-child(1) {
  margin: 0 10px;
}
.menuInfoLIst .goodContent div:nth-child(3) {
  font-size: 12px;
  color: #777;
}
.menuInfoLIst .goodContent div:nth-child(4) {
  font-size: 12px;
  color: #777;
  padding-bottom: 10px;
  border-bottom: 1px #ccc dashed;
}
.menuTitle {
  color: #777;
}
.menuPice {
  color: #f60;
}
.topText {
  text-align: start;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid#CCC;
  span {
    cursor: pointer;
  }
}
.topText span {
  display: inline-block;
  width: 90px;
  padding: 0 15px;
}
// 排序
.indexSort {
  text-align: center;
}

// 猜你喜欢
.wrapper .rightLike {
  background-color: #fff;
  border: 1px solid rgba(173, 173, 173, 0.467);
  border-radius: 5px;
  float: right;
  height: 100%;
  width: 230px;
  padding: 20px;
  box-sizing: border-box;
  text-align: start;
  .shopName {
    font-size: 14px;
    margin: 10px 0 5px;
  }
  .address {
    font-size: 12px;
    color: #9999;
  }
  .allPice {
    color: #f60;
    .pice {
      font-size: 22px;
    }
  }
  h3 {
    margin: 0;
    font-weight: bold;
    margin-bottom: 12px;
  }
}

.goodInfo {
  padding-bottom: 20px;
}
/* .goodInfo :last-child {
		padding-bottom: none;
	} */
.goodInfo img {
  width: 188px;
  height: 106px;
}
// 更多
.more {
  margin-top: 15px !important;
  font-size: 12px;
  color: #777;
}
.more span {
  font-size: 12px !important;
}
//条件选择
.conditionBox {
  padding: 10px 0 10px 20px;
  text-align: start;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid rgba(173, 173, 173, 0.467);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  ul {
    margin: 0;
    margin-left: 10px;
    display: flex;
    align-items: center;
    li {
      border: 1px solid #13d1be;
      margin-right: 5px;
      padding: 0 9px;
      color: #13d1be;
      border-radius: 10px;
      span {
        margin-left: 5px;
      }
    }
  }
}
.FLULEation li {
  padding: 0 !important ;
  margin: 5px 0;
  span {
    padding: 0 10px;
  }
}
.active {
  border-radius: 10px;
  background-color: #13d1be;
  color: #fff;
}
// 五角星
.star-cont .stars-light,
.star-cont .stars-ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 3px 0;
  white-space: nowrap;
  color: #c3c3c3;
}
.star-cont {
  display: inline-block;
  width: 84px;
  height: 24px;
  position: relative;
  .stars-ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 3px 0;
    white-space: nowrap;
    color: #c3c3c3;
    li {
      margin: 0 !important;
      text-align: -webkit-match-parent;
      border: 0 !important;
      padding: 0 2px;
      display: inline-block;
      .iconfont {
        font-size: 12px;
      }
    }
  }
  .stars-light {
    color: #f90;
    position: absolute;
    top: 0;
    overflow: hidden;
  }
}
// 分页器样式
.pagination {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
// 排序字体高亮
.textActive {
  color: #13d1be;
}
</style>
